<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>业绩管理</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/业绩管理.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="js/M_select/M_select.css">
</head>

<body>
    <div id="allbox">
        <h2>业绩管理</h2>
        <div id="box">
            <div id="search">
                <form action="" class="layui-form">
                    <span id="riqi">选择日期</span>
                    <input type="text" id="test1" placeholder="开始日期">
                    <em>-</em>
                    <input type="text" id="test2" placeholder="结束日期">
                    <!-- 部门下拉菜单 -->
                    <div class="layui-form-item" style="margin-bottom: 0px;">
                        <label class="layui-form-label" style="width: 40px;">部门</label>
                        <div class="layui-input-block" style="margin-left: 70px; width: 172px;" id="bumeng">
                            <select name="interest" lay-filter="test3" id="select01">
                                <option value="" disabled selected="">请选择部门</option>
                            </select>
                        </div>
                    </div>
                    <!-- 员工下拉菜单 -->
                    <div class="layui-form-item" style="margin-bottom: 0px;">
                        <label class="layui-form-label" style="width: 40px;">员工</label>
                        <div class="layui-input-block" style="margin-left: 70px; width: 172px;">
                            <select name="interest" lay-filter="test4" id="select02">
                                <option value="" disabled selected="">请选择员工</option>
                            </select>
                        </div>
                    </div>
                    <input type="button" value="搜索" id="ss">
                </form>
            </div>
            <div id="yeji">
                <span>报名量：<em id="a1">100</em></span>
                <span>缴费量：<em id="a2">100</em></span>
                <span>业绩：<em id="a3">￥21,000</em></span>
            </div>
            <div id="main" style="width: 100%;"></div>
            <div id="tab">
                <table border="1">
                    <tr>
                        <th>&nbsp;&nbsp;&nbsp;&nbsp;</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>电话</th>
                        <th>毕业院校</th>
                        <th>专业</th>
                        <th>状态</th>
                        <th>紧急联系人</th>
                        <th>紧急联系人电话</th>
                    </tr>
                </table>
                <div id="page"></div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/echarts.js"></script>
<script src="js/xlPaging.js"></script>
<script src="laydate/laydate.js"></script>
<script src="js/M_select/M_select.js"></script>
<script src="layui/layui.js"></script>
<script>
    // 创建变量zhi来作为全局变量保存部门名字
    var zhi;
    // 创建变量zhi2来作为全局变量保存员工名字
    var zhi2;
    // ajax请求
    var yjglUrl = 'http://192.168.3.76:9999/oaSystem/';
    var tuBiao = 'http://192.168.3.76:9999/oaSystem/graph';
    $.ajax({
        url: yjglUrl + 'apply',
        type: 'post',
        dataType: 'json',
        data: {
            empId: '10001'
        },
        success: function (data) {
            console.log(data);
            $('#a1').html(data.baoming);
            $('#a2').html(data.yijiaofei);
            $('#a3').html("￥" + data.yeji);
        },
        error: function (xhr, errorInfo) {
            console.log('ajax请求失败');
        }
    });
    // 学生信息接口
    $.ajax({
        url: yjglUrl + 'resultstudent',
        type: 'post',
        data: {
            currentPage: '1',
            rows: '5',
            empId: '10001',
            deptName: '市场部',
        },
        success: function (data) {
            var dataArr = JSON.parse(data).result;
            console.log(dataArr);
            for (var i = 0; i < dataArr.length; i++) {
                var trM = $('<tr>').appendTo('table');
                $(trM).prop("class", "trm");
                $('<td>').html(i).appendTo(trM);
                $('<td>').html(dataArr[i].studentName).appendTo(trM);
                if (dataArr[i].studentSex == 1) {
                    dataArr[i].studentSex = '男';
                } else {
                    dataArr[i].studentSex = '女';
                }
                $('<td>').html(dataArr[i].studentSex).appendTo(trM);
                $('<td>').html(dataArr[i].age).appendTo(trM);
                $('<td>').html(dataArr[i].telphone).appendTo(trM);
                $('<td>').html(dataArr[i].schoolName).appendTo(trM);
                $('<td>').html(dataArr[i].major).appendTo(trM);
                $('<td>').html(dataArr[i].stateName).appendTo(trM);
                $('<td>').html(dataArr[i].emergencyName).appendTo(trM);
                $('<td>').html(dataArr[i].emergencyContact).appendTo(trM);
            }
        },
        error: function (xhr, errorInfo) {
            console.log('学生信息接口请求失败');
        }
    });
    // 请求部门
    $.ajax({
        url: yjglUrl + 'emp',
        type: 'post',
        dataType: 'json',
        data: {
            empId: '10001',
            jobName: '市场经理',
            deptName: '市场部',
        },
        success: function (data) {
            console.log(data);
            // 生成部门
            for (var i = 0; i < data.job.length; i++) {
                $('<option></option>').html(data.job[i]).appendTo($('#select01'));
            };
            // 设置下拉框
            layui.use('form', function () {
                var form = layui.form;
                // 当部门变化时ajax请求对应的员工,下拉选择框被选中时触发，回调函数返回一个object参数，携带两个成员：
                form.on('select(test3)', function (data) {
                    // console.log(data.elem); //得到select原始DOM对象
                    console.log(data.value); //得到被选中的值
                    zhi = data.value;
                    // 请求员工
                    $.ajax({
                        url: yjglUrl + 'emp',
                        type: 'get',
                        dataType: 'json',
                        data: {
                            empId: '10001',
                            jobName: '市场经理',
                            deptName: zhi,
                        },
                        success: function (data) {
                            console.log(data);
                            // 清除已有的员工
                            for (var i = 0; i < data.emp.length; i++) {
                                $("#select02").html('');
                            };
                            $('<option value="" disabled selected="">请选择员工</option>').appendTo($('#select02'));
                            // 生成员工
                            for (var i = 0; i < data.emp.length; i++) {
                                $('<option></option>').html(data.emp[i]).appendTo($('#select02'));
                            };
                            // 设置下拉框
                            layui.use('form', function () {
                                var form = layui.form;
                                // 监听员工select选择
                                form.on('select(test4)', function (data) {
                                    // console.log(data.elem); //得到select原始DOM对象
                                    console.log(data.value); //得到被选中的值
                                    zhi2 = data.value;
                                    // console.log(data.othis); //得到美化后的DOM对象
                                });
                            });
                            form.render('select');
                        },
                        error: function (xhr, errorInfo) {
                            console.log('员工请求失败');
                        }
                    });
                });
            });
        },
        error: function (xhr, errorInfo) {
            console.log('部门请求失败');
        }
    });
    // 点击搜索框后请求数据
    $('#ss').click(function () {
        // console.log(zhi);
        // console.log(zhi2);
        // 清空table
        $("table").html('');
        $('<tr><th>&nbsp;&nbsp;&nbsp;&nbsp;</th><th>姓名</th><th>性别</th><th>年龄</th><th>电话</th><th>毕业院校</th><th>专业</th><th>状态</th><th>紧急联系人</th><th>紧急联系人电话</th></tr>').appendTo('table');
        $.ajax({
            url: yjglUrl + 'resultstudent',
            type: 'POST',
            data: {
                currentPage: '1',
                row: '10',
                empId: '10003',
                // start: $('#beginday').val(),
                // end: $('#beginday1').val(),
                jobName: zhi,
                onepeopleName: zhi2,
            },
            success: function (data) {
                // 重新渲染table
                var dataArr = JSON.parse(data).result;
                console.log(dataArr);
                for (var i = 0; i < dataArr.length; i++) {
                    var trM = $('<tr>').appendTo('table');
                    $(trM).prop("class", "trm");
                    $('<td>').html(i).appendTo(trM);
                    $('<td>').html(dataArr[i].studentName).appendTo(trM);
                    if (dataArr[i].studentSex == 1) {
                        dataArr[i].studentSex = '男';
                    } else {
                        dataArr[i].studentSex = '女';
                    }
                    $('<td>').html(dataArr[i].studentSex).appendTo(trM);
                    $('<td>').html(dataArr[i].age).appendTo(trM);
                    $('<td>').html(dataArr[i].telphone).appendTo(trM);
                    $('<td>').html(dataArr[i].schoolName).appendTo(trM);
                    $('<td>').html(dataArr[i].major).appendTo(trM);
                    $('<td>').html(dataArr[i].stateName).appendTo(trM);
                    $('<td>').html(dataArr[i].emergencyName).appendTo(trM);
                    $('<td>').html(dataArr[i].emergencyContact).appendTo(trM);
                }
            },
            error: function (xhr, errorInfo) {
                console.log('搜索按钮请求失败');
            }
        });
    });
    // 设置分页器
    // xlPaging.js 使用方法
    $("#page").paging({
        nowPage: 1, // 当前页码
        pageNum: 100, // 总页码
        buttonNum: 6, //要展示的页码数量
        canJump: 1,// 是否能跳转。0=不显示（默认），1=显示
        showOne: 0,//只有一页时，是否显示。0=不显示,1=显示（默认）
        callback: function (num) { //回调函数
            console.log(num);
            // 清除表格数据
            $(".trm").remove();
            // 学生信息接口
            $.ajax({
                url: yjglUrl + 'resultstudent',
                type: 'post',
                data: {
                    currentPage: num,
                    rows: '5',
                    empId: '10001',
                    deptName: '市场部',
                },
                success: function (data) {
                    var dataJx = JSON.parse(data);
                    var dataArr = JSON.parse(data).result;
                    console.log(dataArr);
                    console.log(dataJx.code);
                    if (dataJx.code == 100) {
                        console.log(dataArr);
                        for (var i = 0; i < dataArr.length; i++) {
                            var trM = $('<tr>').appendTo('table');
                            $(trM).prop("class", "trm");
                            $('<td>').html(i).appendTo(trM);
                            $('<td>').html(dataArr[i].studentName).appendTo(trM);
                            if (dataArr[i].studentSex == 1) {
                                dataArr[i].studentSex = '男';
                            } else {
                                dataArr[i].studentSex = '女';
                            }
                            $('<td>').html(dataArr[i].studentSex).appendTo(trM);
                            $('<td>').html(dataArr[i].age).appendTo(trM);
                            $('<td>').html(dataArr[i].telphone).appendTo(trM);
                            $('<td>').html(dataArr[i].schoolName).appendTo(trM);
                            $('<td>').html(dataArr[i].major).appendTo(trM);
                            $('<td>').html(dataArr[i].stateName).appendTo(trM);
                            $('<td>').html(dataArr[i].emergencyName).appendTo(trM);
                            $('<td>').html(dataArr[i].emergencyContact).appendTo(trM);
                        }
                    }
                },
                error: function (xhr, errorInfo) {
                    console.log('学生信息接口请求失败');
                }
            });

            // 点击搜索框后请求数据
            // $('#ss').click(function () {
            //     // console.log(zhi);
            //     // console.log(zhi2);
            //     // 清除表格数据
            //     $(".trm").remove();
            //     $.ajax({
            //         url: yjglUrl + 'resultstudent',
            //         type: 'POST',
            //         data: {
            //             currentPage: num,
            //             row: '10',
            //             empId: '10003',
            //             // start: $('#beginday').val(),
            //             // end: $('#beginday1').val(),
            //             jobName: zhi,
            //             onepeopleName: zhi2,
            //         },
            //         success: function (data) {
            //             // 清空table
            //             $("table").html('');
            //             $('<tr><th>&nbsp;&nbsp;&nbsp;&nbsp;</th><th>姓名</th><th>性别</th><th>年龄</th><th>电话</th><th>毕业院校</th><th>专业</th><th>状态</th><th>紧急联系人</th><th>紧急联系人电话</th></tr>').appendTo('table');
            //             // 重新渲染table
            //             var dataArr = JSON.parse(data).result;
            //             console.log(dataArr);
            //             for (var i = 0; i < dataArr.length; i++) {
            //                 var trM = $('<tr>').appendTo('table');
            //                 $(trM).prop("class", "trm");
            //                 $('<td>').html(i).appendTo(trM);
            //                 $('<td>').html(dataArr[i].studentName).appendTo(trM);
            //                 if (dataArr[i].studentSex == 1) {
            //                     dataArr[i].studentSex = '男';
            //                 } else {
            //                     dataArr[i].studentSex = '女';
            //                 }
            //                 $('<td>').html(dataArr[i].studentSex).appendTo(trM);
            //                 $('<td>').html(dataArr[i].age).appendTo(trM);
            //                 $('<td>').html(dataArr[i].telphone).appendTo(trM);
            //                 $('<td>').html(dataArr[i].schoolName).appendTo(trM);
            //                 $('<td>').html(dataArr[i].major).appendTo(trM);
            //                 $('<td>').html(dataArr[i].stateName).appendTo(trM);
            //                 $('<td>').html(dataArr[i].emergencyName).appendTo(trM);
            //                 $('<td>').html(dataArr[i].emergencyContact).appendTo(trM);
            //             }
            //         },
            //         error: function (xhr, errorInfo) {
            //             console.log('搜索按钮请求失败');
            //         }
            //     });
            // });
        }
    });
    // 设置统计图
    // 基于准备好的dom，初始化echarts实例
    // ajax请求统计图的数据
    $.ajax({
        url: tuBiao,
        type: 'post',
        dataType: 'json',
        data: {
            empId: '10001',
            deptName: "市场部",
            empName: '',
            startTime: '2019-10-01 00:00:00',
            endTime: '',
        },
        success: function (data) {
            console.log(data);
            // 报名量数组
            var applyArr = [];
            for (var i = 0; i < data.result.length; i++) {
                applyArr.push(data.result[i].apply);
            }
            // console.log(applyArr);
            // 转化率数组
            var rateArr = [];
            for (var i = 0; i < data.result.length; i++) {
                rateArr.push(data.result[i].rate);
            }
            // console.log(rateArr);
            // 咨询量数组
            var referArr = [];
            for (var i = 0; i < data.result.length; i++) {
                referArr.push(data.result[i].refer);
            }
            // console.log(referArr);
            // 开始配置统计图
            if (data.code == 100) {
                var myChart = echarts.init(document.getElementById('main'));
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        data: ['报名量', '咨询量', '转化率']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '人数（人）',
                            min: 0,
                            max: 10,
                            interval: 1,
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        {
                            type: 'value',
                            name: '百分比',
                            min: 0,
                            max: 100,
                            interval: 20,
                            axisLabel: {
                                formatter: '{value} %'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '报名量',
                            type: 'bar',
                            data: applyArr
                        },
                        {
                            name: '咨询量',
                            type: 'bar',
                            data: referArr
                        },
                        {
                            name: '转化率',
                            type: 'line',
                            yAxisIndex: 1,
                            data: rateArr
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        },
        error: function (xhr, errorInfo) {
            console.log('统计图ajax请求失败');
        }
    });
    // 设置日历插件
    //执行一个laydate实例
    laydate.render({
        elem: '#test1' //指定元素
    });
    laydate.render({
        elem: '#test2' //指定元素
    });


</script>